<template>
  <a-modal
    v-bind="$attrs"
    :width="817"
    cancelText="取消"
    okText="确定"
    @ok="handleConfirmModal"
    :confirmLoading="loading"
    destroyOnClose
  >
    <a-form
      layout="vertical"
      :rules="CREATE_MENU_FORM_RULES"
      :model="ownFormData"
      ref="menuFormRef"
    >
      <a-row :gutter="[20, 20]">
        <a-col :span="12">
          <a-form-item label="名称" has-feedback name="name">
            <a-input v-model:value="ownFormData.name" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="URL" has-feedback name="url">
            <a-input v-model:value="ownFormData.url" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[20, 20]" has-feedback name="slug">
        <a-col :span="12">
          <a-form-item label="图标">
            <a-input v-model:value="ownFormData.slug" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="所属模块" has-feedback name="moduleId">
            <a-select
              v-model:value="ownFormData.moduleId"
              placeholder="请选择模块"
            >
              <a-select-option
                v-for="moduleItem in modulesList"
                :key="moduleItem.id"
              >
                {{ moduleItem.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[20, 20]">
        <a-col :span="12">
          <a-form-item label="能否删除" has-feedback name="canDelete">
            <a-radio-group v-model:value="ownFormData.canDelete">
              <a-radio :value="1">能</a-radio>
              <a-radio :value="0">不能</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <template v-if="isDetail">
          <a-col :span="12">
            <a-form-item label="状态" has-feedback name="status">
              <a-radio-group v-model:value="ownFormData.status">
                <a-radio :value="1">正常</a-radio>
                <a-radio :value="0">禁用</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </template>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import { ModuleListVO } from "@/pojo/ModuleListVO";
import { FormInstance, Rule } from "ant-design-vue/es/form";
import { computed, ref, watch } from "vue";
import { MenuForm } from "./types";
import _cloneDeep from "lodash/cloneDeep";

interface Props {
  modulesList?: ModuleListVO[];
  actionType?: string;
  data?: any;
  loading?: boolean;
}

const emits = defineEmits<{
  (e: "submit", payload: MenuForm): void;
}>();

const props = withDefaults(defineProps<Props>(), {
  actionType: "create",
  modulesList: () => [],
  loading: false,
});

const CREATE_MENU_FORM_RULES: Record<string, Rule[]> = {
  name: [{ required: true, trigger: ["change", "blur"] }],
  url: [{ required: true, trigger: ["change", "blur"] }],
  canDelete: [{ required: true, trigger: ["change", "blur"] }],
  module_id: [{ required: true, trigger: ["change", "blur"] }],
};

const menuFormRef = ref<FormInstance>();

let ownFormData = ref<MenuForm>({
  name: "",
  canDelete: 1,
  url: "",
  moduleId: "",
  status: 0,
});

watch(
  () => props.data,
  (newVal) => {
    ownFormData.value = _cloneDeep(newVal) as MenuForm;
  },
  {
    deep: true,
    immediate: true,
  }
);

const isDetail = computed<boolean>(() => {
  return props.actionType === "detail";
});

const handleConfirmModal = () => {
  menuFormRef.value
    ?.validate()
    .then(() => {
      emits("submit", ownFormData.value);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>
